<template>
  <view class="setting_container" :style="'height:calc(100vh - ' + topBarHeight + 'px)'">
    <view class="home_top_bg">
      <view class="top_bgimg" :style="'height:' + topBarHeight + 'px;'">
        <view class="top_cont"
          :style="'height:' + tabBarHeight + 'px;margin-top:' + stateBarHeight + 'px'">
          <image :src="staticUrl + '/new/indexBg.png'" alt="" class="top_bgc" />
        </view>
      </view>
    </view>

    <view :style="'margin-top:' + topBarHeight + 'px'"> </view>

    <view class="essentialInfo">
      <view class="info">
        <image :src="userAvatar ? userAvatar : staticUrl + '/setting/img.png'" class="loginImage">
        </image>
        <view v-if="!status" class="infoName">
          <text @click="onLogin">登录/注册</text>
          <!-- <image :src="staticUrl + '/setting/mineGo.png'"></image> -->
        </view>
        <view v-if="status" class="loginAfter">
          <view class="username" @click="clickPurchaserName">
            <text class="singleRowEllipsis">{{ purchaserName }}</text>
            <!-- <image :src="staticUrl + '/setting/mineGo.png'"></image> -->
          </view>
          <view class="switchAccount" @click="switchAccount">
            <image :src="staticUrl + '/setting/switch.png'"></image>
          </view>
        </view>
        <image :src="staticUrl + '/setting/topSetting.png'" alt="" class="top_icon"
          @click="clickSetting" />
      </view>
      <view class="balance">
        <view @click="clickBalance">
          <text>余额</text> <text class="nums">{{ balanceNum }}</text>
        </view>
        <view @click="clickCoupon">
          <text>代金券</text> <text class="nums">{{ couponNum }}</text>
        </view>
        <view @click="clickIntegral">
          <text>积分</text> <text class="nums">{{ integralNum }}</text>
        </view>
      </view>
      <view class="order">
        <view class="title">
          <text>我的订单</text>
          <text @click="clickAllOrder">全部订单 </text>
        </view>
        <view class="orderStatusNum">
          <view @click="clickOrder('WAIT_PAY')">
            <image :src="staticUrl+ '/setting/paid.png'"></image>
            <text>待支付</text>
            <text class="cornerMarker">{{ WAIT_PAY }}</text>
          </view>
          <view @click="clickOrder('WAIT_SHIP')">
            <image :src="staticUrl + '/setting/delivered.png'"></image>
            <text>待发货</text>
            <text class="cornerMarker">{{ WAIT_SHIP }}</text>
          </view>
          <view @click="clickOrder('WAIT_ROG')">
            <image :src="staticUrl + '/setting/receiving.png'"></image>
            <text>待收货</text>
            <text class="cornerMarker">{{ WAIT_ROG }}</text>
          </view>
          <view @click="clickOrder('COMPLETE')">
            <image :src="staticUrl + '/setting/completed.png'"></image>
            <text>已完成</text>
            <text class="cornerMarker">{{ COMPLETE }}</text>
          </view>
          <view @click="clickAfterSales">
            <image :src="staticUrl + '/setting/afterSales.png'"></image>
            <text>退款/售后</text>
          </view>
        </view>
      </view>
      <view class="other">
        <view @click="clickOther('invoice')">
          <image :src="staticUrl + '/setting/invoice.png'"></image>
          <text>发票管理</text>
        </view>
        <view @click="clickOther('coupon')">
          <image :src="staticUrl + '/setting/coupon.png'"></image>
          <text>领券中心</text>
        </view>
        <view @click="clickOther('qualifications')">
          <image :src="staticUrl + '/setting/qualification.png'"></image>
          <text>资质管理</text>
        </view>
        <view @click="clickOther('collection?type=GOODS')">
          <image :src="staticUrl + '/setting/collection.png'"></image>
          <text>我的收藏</text>
        </view>
        <view @click="clickOther('invitationCode')">
          <image :src="staticUrl + '/setting/invitationCode.png'"></image>
          <text>邀请码</text>
        </view>
        <!-- 		<view @click="clickOther('receipt')">
					<image :src="staticUrl + '/setting/receipt.png'"></image>
					<text>回执单</text>
				</view> -->
        <view @click="clickOther('footprint')">
          <image :src="staticUrl + '/setting/footprint.png'"></image>
          <text>我的足迹</text>
        </view>
        <view @click="clickOther('im')">
          <image :src="staticUrl + '/setting/service.png'"></image>
          <text>专属客服</text>
        </view>
        <view @click="clickOther('opinion')">
          <image :src="staticUrl + '/setting/opinion.png'"></image>
          <text>意见反馈</text>
        </view>
        <view @click="clickOther('invoicer')" v-if="role === 'STAFF'">
          <image :src="staticUrl + '/setting/invoicer.png'"></image>
          <text>开票员入口</text>
        </view>
      </view>
      <view class="im">
        <image :src="staticUrl + '/setting/imLogo.png'" class="logo" mode="aspectFit"></image>
        <text class="phone" @click="dialNumber">{{ Telephone }}</text>
      </view>
    </view>

    <PermissionPopup v-if="isPermission" :type="permissionType" :visible="isPermission"
      :messageTxt="permissionTxt" @updateVisible="isPermission = $event" @scanCoding="scanCoding">
    </PermissionPopup>

    <QualificationsStatus v-if="verifyTokenStatus"></QualificationsStatus>
  </view>
</template>

<script>
import { orderStatusNum, getwalletBalance, contactTelephone } from '@/api/setting/index.js'
import { customerService } from '@/api/home/index'
import PermissionPopup from '@/components/permission/index.vue'
import jwtDecode from 'jwt-decode'
import permission from "../../utils/permission"


export default {
  components: { PermissionPopup },
  data () {
    return {
      verifyTokenStatus: false,
      topBarHeight: 0, //状态栏加导航栏高度
      stateBarHeight: 0, //导航栏高度
      tabBarHeight: 50, //状态栏高度
      userAvatar: '',
      purchaserName: '',
      balanceNum: '0',
      couponNum: '0',
      integralNum: '0',
      WAIT_PAY: '',
      WAIT_SHIP: '',
      WAIT_ROG: '',
      COMPLETE: '',
      afterSalesNum: '',
      Telephone: '',
      isPermission: false,
      permissionTxt: '',
      role: '',
      staticUrl: 'https://www.xdyy100.com/wholesale/files/mp/static',
      status: '',
      permissionType: '',
    }
  },
  onLoad () {
    // 客服电话
    contactTelephone().then(res => {
      if (res.code === 200) {
        this.Telephone = res.data.mobiles[0]
        if (this.Telephone.length === 11) {
          this.Telephone = this.Telephone.split('')
          this.Telephone.splice(7, 0, '-')
          this.Telephone.splice(3, 0, '-')
          this.Telephone = this.Telephone.join('')
        }
      }
    })
  },
  onShow () {
    var self = this
    uni.getSystemInfo({
      success: function (res) {
        self.stateBarHeight = res.statusBarHeight
        // #ifdef MP-WEIXIN
        let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
        let paddingSize = menuButtonInfo.top - self.stateBarHeight
        self.tabBarHeight = menuButtonInfo.bottom - self.stateBarHeight + paddingSize
        self.topBarHeight = menuButtonInfo.bottom + paddingSize
        // #endif
        // #ifndef MP
        self.topBarHeight = self.tabBarHeight + self.stateBarHeight
        // #endif
        // #ifdef MP-TOUTIAO
        self.stateBarHeight = 0
        self.topBarHeight = 0
        // #endif
      }
    })
    this.initialization()
  },
  methods: {
    dialNumber () {
      // #ifdef MP-WEIXIN
      uni.makePhoneCall({ phoneNumber: this.Telephone })
      // #endif
      // #ifndef MP-WEIXIN
      if (uni.getSystemInfoSync().osName !== 'ios') {
        this.permissionTxt = '用于拨打客服电话，请打开手机通话权限'
        this.permissionType = "phone"
        this.isPermission = true
      }
      permission.requestAndroidPermission('android.permission.CALL_PHONE').then(r => {
        if (r === 1) {
          uni.makePhoneCall({ phoneNumber: this.Telephone })
        }
      })
      // #endif
    },
    qualificationsOverdue () {
      uni.navigateTo({
        url: '/subpackage/personalCenter/qualifications?active=2'
      })
    },
    switchAccount () {
      uni.navigateTo({
        url: '/pages_user/setting/switchAccount'
      })
    },
    onLogin () {
      uni.navigateTo({
        url: '/pages_user/reg/index'
      })
    },
    // 初始化
    initialization () {
      this.status = this.hasToken()
      this.WAIT_PAY = ''
      this.WAIT_SHIP = ''
      this.WAIT_ROG = ''
      this.COMPLETE = ''
      this.userAvatar = ''
      this.purchaserName = ''
      this.role = ''
      this.verifyTokenStatus = getApp().verifyTokenStatus()
      if (this.hasToken()) {
        let a = JSON.parse(jwtDecode(uni.getStorageSync('token')).userContext.replace('\\', ''))
        this.userAvatar = a.face
        this.purchaserName = a.purchaserName || a.username
        this.role = a.role
        this.getList()
      }
    },
    getList () {
      // 各类订单数量
      orderStatusNum().then(res => {
        if (res.code === 200) {
          res.data.forEach(item => {
            if (item.orderStatus === 'UNPAID') {
              // 未付款
              this.WAIT_PAY = item.num
            }
            if (item.orderStatus === 'UNDELIVERED') {
              // 未发货
              this.WAIT_SHIP = item.num
            }
            if (item.orderStatus === 'DELIVERED') {
              // 已发货
              this.WAIT_ROG = item.num
            }
            if (item.orderStatus === 'COMPLETED') {
              // 已完成
              this.COMPLETE = item.num
            }
          })
        }
      })
      // 余额
      getwalletBalance().then(res => {
        if (res.code == 200) {
          this.balanceNum = res.data.memberWallet
        }
      })
    },
    // 拨打电话
    dial () {
      uni.makePhoneCall({
        phoneNumber: this.Telephone
      })
    },
    // 点击 设置
    clickSetting () {
      if (this.hasToken()) {
        uni.navigateTo({ url: '/pages_user/setting/setting' })
      } else {
        uni.navigateTo({ url: '/pages_user/reg/index' })
      }
    },
    // 跳转 余额
    clickBalance () {
      if (this.hasToken()) {
        uni.navigateTo({
          url: '/pages_user/wallet/index'
        })
      } else {
        uni.navigateTo({
          url: '/pages_user/reg/index'
        })
      }
    },
    // 代金券
    clickCoupon () {
      if (this.hasToken()) {
        uni.showToast({
          icon: 'none',
          title: '暂未开通',
          mask: true
        })
      } else {
        uni.navigateTo({
          url: '/pages_user/reg/index'
        })
      }
    },
    // 积分
    clickIntegral () {
      if (this.hasToken()) {
        uni.navigateTo({ url: '/pages_user/integral/index' })
      } else {
        uni.navigateTo({
          url: '/pages_user/reg/index'
        })
      }
    },
    // 点击头像 名字
    clickPurchaserName () {
      if (this.hasToken()) {
        uni.navigateTo({
          url: '/pages_user/setting/basicInformation'
        })
      } else {
        uni.navigateTo({
          url: '/pages_user/reg/index'
        })
      }
    },
    // 全部订单
    clickAllOrder () {
      if (this.hasToken()) {
        uni.navigateTo({
          url: '/subpackage/order/index?type=ALL'
        })
      } else {
        uni.navigateTo({
          url: '/pages_user/reg/index'
        })
      }
    },
    // 订单分类
    clickOrder (item) {
      if (this.hasToken()) {
        uni.navigateTo({
          url: '/subpackage/order/index?type=' + item
        })
      } else {
        uni.navigateTo({
          url: '/pages_user/reg/index'
        })
      }
    },
    // 其他 项
    clickOther (item) {
      if (item === 'receipt') {
        uni.showToast({ icon: 'none', title: '暂未开通', mask: true })
        return
      }
      if (this.hasToken()) {
        if (item === 'im') {
          // #ifdef MP-WEIXIN
          uni.navigateTo({ url: '/subpackage/personalCenter/' + item })
          // #endif
          // #ifndef MP-WEIXIN
          if (uni.getSystemInfoSync().osName === 'ios') {
            this.scanCoding()
          } else {
            this.permissionType = ""
            this.isPermission = true
            this.permissionTxt =
              '用于获取设备权限进行拍照、图片上传，需要获取手机相机、相册（存储）权限'
          }
          // #endif
        } else if (item === 'invitationCode') {
          console.log(JSON.parse(jwtDecode(uni.getStorageSync('token')).userContext).businessCode)
          if (!JSON.parse(jwtDecode(uni.getStorageSync('token')).userContext).businessCode) {
            uni.showToast({ icon: 'none', title: '审核通过后可用' })
            return
          } else {
            item =
              item +
              '?invitationCode=' +
              JSON.parse(jwtDecode(uni.getStorageSync('token')).userContext).businessCode
          }
          uni.navigateTo({ url: '/subpackage/personalCenter/' + item })
        } else if (item === 'invoicer') {
          uni.reLaunch({ url: '/invoicer/index' })
        } else {
          uni.navigateTo({ url: '/subpackage/personalCenter/' + item })
        }
      } else {
        uni.navigateTo({ url: '/pages_user/reg/index' })
      }
    },
    scanCoding () {
      customerService().then(res => {
        if (res.code === 200) {
          uni.navigateTo({
            url: `/pages/mySetting/webView-im?url=${res.data.h5}&title=${res.data.robotName}`
          })
        }
      })
    },
    clickAfterSales (item) {
      if (this.hasToken()) {
        uni.navigateTo({
          url: '/pages_user/afterSales/index'
        })
      } else {
        uni.navigateTo({
          url: '/pages_user/reg/index'
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.im {
  height: 163rpx;
  margin: 0 25rpx;
  position: relative;
  .logo {
    width: 100%;
    height: 100%;
  }
  .phone {
    font-size: 32rpx;
    color: #2871fc;
    position: absolute;
    bottom: 34rpx;
    right: 140rpx;
  }
}

.other {
  display: flex;
  flex-flow: row wrap;
  background: #fff;
  border-radius: 16rpx;
  margin: 0 25rpx 20.83rpx;
  padding: 47.91rpx 0 0;
  z-index: 100;

  view {
    width: 20%;
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    font-size: 21rpx;
    margin-top: 3.2rpx;
    margin-bottom: 46.94rpx;

    image {
      width: 44rpx;
      height: 44rpx;
    }

    text {
      margin-top: 20rpx;
    }
  }
  .other_title {
  }

  view:nth-child(1),
  view:nth-child(5n) {
    margin-left: 0;
  }
}

.order {
  display: flex;
  flex-flow: column nowrap;
  background: #fff;
  margin: 0 25rpx 20.83rpx;
  border-radius: 16rpx;
  z-index: 100;

  .title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 30rpx;
    padding: 0 30rpx;

    text:nth-child(1) {
      font-size: 30rpx;
      font-weight: bold;
    }

    text:nth-child(2) {
      font-size: 25rpx;
      color: #585858;
    }
  }

  .orderStatusNum {
    display: flex;
    flex-flow: row nowrap;
    padding: 53.47rpx 0 39.58rpx;

    view {
      width: 20%;
      display: flex;
      flex-flow: column nowrap;
      align-items: center;
      font-size: 26rpx;
      position: relative;

      image {
        width: 44.44rpx;
        height: 41.67rpx;
        margin-bottom: 16.67rpx;
      }

      text {
        font-size: 21rpx;
      }

      .cornerMarker {
        position: absolute;
        top: -20%;
        left: 60%;
        z-index: 1000;
        background: #ef231b;
        color: #fff;
        padding: 0rpx 10rpx;
        font-size: 20rpx;
        border-radius: 20rpx;
      }
    }
  }
}

.balance {
  margin: 0 25rpx 20.83rpx;
  display: flex;

  view {
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    color: #666666;
    font-size: 26rpx;
    margin-left: 25rpx;
    margin-right: 66rpx;
    .nums {
      font-size: 36rpx;
      color: #ef231b;
      margin-top: 10rpx;
      font-weight: bold;
      font-size: 36rpx;
      color: #333333;
    }
  }
}

.essentialInfo {
  position: absolute;
  width: 100%;
  z-index: 100;
  .info {
    //height: 250rpx;
    color: #333333;
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    margin-bottom: 50rpx;
    position: relative;
    .loginImage {
      width: 128rpx;
      height: 128rpx;
      margin-left: 35rpx;
    }
    .infoName {
      display: flex;
      flex-flow: row nowrap;
      align-items: center;
      margin-left: 32rpx;
      text {
        max-width: 400rpx;
        font-size: 33.33rpx;
      }
      image {
        width: 18.75rpx;
        height: 29.86rpx;
        margin-left: 24.31rpx;
        margin-top: 7rpx;
      }
    }
    .loginAfter {
      display: flex;
      flex-flow: column nowrap;
      margin-left: 32rpx;

      .username {
        display: flex;
        flex-flow: row nowrap;
        align-items: center;

        text {
          display: inline-block;
          max-width: 400rpx;
          font-size: 32rpx;
          margin-right: 29.86rpx;
        }

        image {
          width: 18.75rpx;
          height: 29.86rpx;
          margin-top: 7rpx;
        }
      }

      .switchAccount {
        margin-top: 14rpx;
        image {
          width: 170rpx;
          height: 52rpx;
        }
      }
    }
    .top_icon {
      width: 44rpx;
      height: 44rpx;
      position: absolute;
      top: 44rpx;
      right: 52rpx;
    }
  }
}

.home_top_bg {
  width: 100%;

  .top_bgimg {
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
  }

  .top_cont {
    display: flex;
    align-items: center;

    .top_icon {
      width: 44rpx;
      height: 44rpx;
      position: absolute;
      /* #ifdef MP-WEIXIN */
      left: 44rpx;
      /* #endif */
      /* #ifndef MP-WEIXIN */
      right: 44rpx;
      /* #endif */
      z-index: 10;
    }

    .top_bgc {
      position: absolute;
      top: 0;
      width: 100%;
      height: 1600rpx;
    }
  }
}

.setting_container {
  background: #f9f9f9;
}
</style>
